<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">登录</view>
    </view>

    <!-- 主内容 -->
    <view class="content">
      <!-- Logo 和标题 -->
      <view class="header">
        <text class="logo-icon">🏥</text>
        <text class="app-name">医疗教育培训</text>
        <text class="app-desc">手机号/微信 一键登录</text>
      </view>

      <!-- 登录表单 -->
      <view class="form">
        <!-- 手机号输入 -->
        <view class="input-box">
          <text class="input-icon">📱</text>
          <input
            class="input-field"
            type="number"
            placeholder="请输入手机号"
            v-model="phone"
            maxlength="11"
          />
          <view class="get-code-btn" @tap="getVerifyCode">
            <text class="get-code-text">{{ codeText }}</text>
          </view>
        </view>

        <!-- 验证码输入 -->
        <view class="input-box">
          <text class="input-icon">🛡️</text>
          <input
            class="input-field"
            type="number"
            placeholder="请输入验证码"
            v-model="verifyCode"
            maxlength="6"
          />
        </view>

        <!-- 手机号登录按钮 -->
        <view class="login-btn" @tap="loginByPhone">
          <text class="login-btn-text">手机号登录</text>
        </view>

        <!-- 微信登录按钮 -->
        <view class="wechat-btn" @tap="loginByWechat">
          <text class="wechat-icon">💬</text>
          <text class="wechat-btn-text">微信登录</text>
        </view>
      </view>

      <!-- 协议声明 -->
      <view class="agreement">
        <text class="agreement-text">登录即同意《服务协议》《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      phone: "",
      verifyCode: "",
      codeText: "获取验证码",
      countdown: 60,
      timer: null,
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  methods: {
    // 获取验证码
    getVerifyCode() {
      if (!this.phone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }

      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号格式不正确",
          icon: "none",
        });
        return;
      }

      // 开始倒计时
      this.countdown = 60;
      this.codeText = `${this.countdown}秒`;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.codeText = "获取验证码";
        } else {
          this.codeText = `${this.countdown}秒`;
        }
      }, 1000);

      // TODO: 调用API获取验证码
      uni.showToast({
        title: "验证码已发送",
        icon: "success",
      });
    },

    // 手机号登录
    loginByPhone() {
      if (!this.phone || !this.verifyCode) {
        uni.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }

      // TODO: 调用登录API
      uni.showLoading({ title: "登录中..." });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "登录成功",
          icon: "success",
        });

        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/home/home",
          });
        }, 1000);
      }, 1000);
    },

    // 微信登录
    loginByWechat() {
      // TODO: 实现微信登录
      uni.showToast({
        title: "微信登录功能开发中",
        icon: "none",
      });
    },
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

/* 主内容 */
.content {
  flex: 1;
  padding: 0 24px;
}

/* 头部 */
.header {
  margin-top: 32px;
  text-align: center;
}

.logo-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}

.app-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.app-desc {
  display: block;
  font-size: 12px;
  color: #6b7280;
}

/* 表单 */
.form {
  margin-top: 24px;
}

.input-box {
  background-color: #f9fafb;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.input-icon {
  font-size: 20px;
}

.input-field {
  flex: 1;
  font-size: 14px;
  background-color: transparent;
}

.get-code-btn {
  padding: 0 12px;
}

.get-code-text {
  font-size: 14px;
  color: #2563eb;
}

.login-btn {
  /* width: 100%; */
  background-color: #2563eb;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  margin-top: 12px;
}

.login-btn-text {
  font-size: 14px;
  color: #ffffff;
}

.wechat-btn {
  /* width: 100%; */
  background-color: #111827;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wechat-icon {
  font-size: 20px;
}

.wechat-btn-text {
  font-size: 14px;
  color: #ffffff;
}

/* 协议 */
.agreement {
  margin-top: 16px;
  text-align: center;
}

.agreement-text {
  font-size: 12px;
  color: #6b7280;
}
</style>


